<template>
  <div class="mainContainer">
    <div
        class="leftMenu"
        style="
        display: block;
        width: 15%;
        height: 100vh;
        float: left;
        background-color: skyblue;
      "
    >
      <el-image
          style="width: 170px; height: 215px; margin: 70px 15% 30px"
          :src="src"
      ></el-image>
      <ul style="list-style: none; color: #fff; font-weight: 600">
        <li><i class="iconfont icon-xingming com-icon"></i>姓名: {{ userInfo.tName }}</li>
        <li><i class="iconfont icon-xueli com-icon"></i>学历: {{ userInfo.tStudy }}</li>
        <li><i class="iconfont icon-shengao com-icon"></i>身高: {{ userInfo.tHeight }} CM</li>
        <li>
          <i class="iconfont icon-31dianhua com-icon"></i>电话: {{ userInfo.tPhone }}
        </li>
      </ul>
      <div class="line"></div>
      <el-menu
          default-active="1"
          background-color="skyblue"
          text-color="#fff"
          active-text-color="#fff"
          style="font-weight: 600"
          router
          collapse-transition
      >
        <el-menu-item index="/resume/resumemain/resumeinfo">
          <i class="iconfont icon-icon_xinyong_xianxing_jijin-215 com-icon"></i>
          <span slot="title">更新我的简历</span>
        </el-menu-item>
        <el-submenu index="1">
          <template slot="title">
            <i class="iconfont icon-shezhi com-icon"></i>
            <span slot="title">管理我的账户</span>
          </template>
          <el-menu-item
              index="/resume/resumemain/changepass"
              style="text-align: center"
          >修改密码
          </el-menu-item
          >
        </el-submenu>
      </el-menu>
    </div>
    <div class="resume-header">
      <h1><i class="el-icon-s-order" style="margin-right: 20px"></i>简历</h1>
      <div class="top-menu">
        <div
            class="top-cnt"
            style="color: skyblue; margin-left: 50px; border-left: 1px solid #eee"
            @click="refreshResum"
        >
          刷新简历
        </div>
        <div class="top-cnt" style="color: red" @click="toPersonalLogin">
          人事管理系统
        </div>
        <div class="top-cnt" style="color: #999" @click="exitResume">
          <i class="iconfont icon-exit-full"></i>退出
        </div>
      </div>
      <div class="bline"></div>
    </div>
    <div class="rightContainer">
      <router-view/>
    </div>
  </div>
</template>

<script>
import {mapMutations} from "vuex";

export default {
  name: "ResumeMain",
  data() {
    return {
      userInfo: {},
      src: "",
      activeIndex: "1",
    };
  },
  methods: {
    ...mapMutations("resume", ["next"]),
    //到人事管理系统登陆界面
    toPersonalLogin() {
      this.next("pLogin");
    },
    //到简历登陆界面
    exitResume() {
      localStorage.removeItem('userInfo')
      this.next("talentLogin");
    },
    refreshResum() {
      this.next("infoResume")
    },
    getUrl() {
      let id = this.userInfo.tId
      this.$axios.get(`/talents/showLoginAndPasswrod/${id}`)
          .then(res => {
            let partUrl = res.data.data.tImg
            console.log(partUrl)
            this.src = `http://132.232.110.185/personnelManagement//upload/${partUrl}`
          })
    }
  },
  created() {
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"))
  },
  mounted() {
    this.getUrl()
  }
};
</script>

<style scoped>
.mainContainer {
  position: relative;
}

.leftMenu {
  position: fixed;
  width: 15%;
  z-index: 999;
}

.resume-header {
  position: fixed;
  top: 0;
  z-index: 55;
  width: 100%;
}

h1 {
  height: 70px;
  line-height: 70px;
  text-align: center;
  background-color: skyblue;
  color: white;
}

.top-menu {
  position: fixed;
  top: 70px;
  left: 15%;
  width: 100%;
  height: 45px;
  line-height: 45px;
  font-size: 14px;
  background-color: #fff;
}

.bline {
  height: 2px;
  background-color: #282828;
  margin: 46px 0;
}

.top-cnt {
  display: inline-block;
  padding: 0 10px;
  font-weight: bold;
  border-right: 1px solid #eee;
}

.top-cnt:hover {
  background-color: #eee;
  cursor: pointer;
}

.rightContainer {
  width: 85%;
  height: 100%;
  padding: 30px;
  margin: 115px 0 0 253px;
  float: left;
  overflow-x: hidden;
}

.com-icon {
  font-size: 22px;
  padding: 10px 15px 10px 35px;
  color: #fff;
}

ul > li {
  height: 50px;
  line-height: 50px;
}

ul > li:hover {
  background-color: rgb(76, 189, 236);
}

.line {
  height: 3px;
  background-color: #fff;
  margin: 20px 0;
}

.el-submenu >>> .el-submenu__title:hover {
  background-color: rgb(76, 189, 236) !important;
}

.el-menu-item:hover {
  background-color: rgb(76, 189, 236) !important;
}
</style>